// 处理分类业务函数
import { ref, onMounted, watch } from 'vue'
import { getTowCategoryListService } from '@/api/category'
import { useRoute, onBeforeRouteUpdate } from 'vue-router'

export const useCategory = () => {
  // 获取二级分类数据
  const categoryData = ref([])
  const route = useRoute()
  const getTowCategoryList = async (id = route.params.id) => {
    const res = await getTowCategoryListService(id)
    // console.log(res)
    categoryData.value = res.data.result
  }

  // 一进页面就调用
  onMounted(() => {
    getTowCategoryList()
  })

  // 监听路由参数的变化
  // 目标:路由参数变化的时候 可以把分类数据接口重新发送
  // 方法1：watch
  // watch(
  //   () => route.params.id,
  //   () => {
  //     getTowCategoryList()
  //   },
  // )

  // 方法2：onBeforeUpdate
  onBeforeRouteUpdate((to) => {
    // console.log(to) //其中to参数是路由信息，包含to.params能拿到路由参数
    getTowCategoryList(to.params.id)
  })

  // 暴露出去
  return {
    categoryData,
  }
}
